
<template>
    <div>
        <div class="top">
            <div class="con">
            <div class="left"> 就想促个销，全场5折！</div>
            <div class="right">

                <div class="item">
                <span class="text">欢迎来到河小铺！</span>
                <span class="link">
                    <RouterLink
                    :to="{ name: 'loginView' }"
                    >
                    登录
                    </RouterLink>

                    <span>/</span>

                    <RouterLink
                    :to="{ name: 'registerView' }"
                    >
                    注册
                    </RouterLink>
                </span>
                </div>

                <div class="item">
                    <RouterLink
                    :to="{ name: 'homeView' }"
                    class="mr-[10px]"
                    >
                    商城首页
                    </RouterLink>
                </div>
                <div class="item">
                    <RouterLink
                    :to="{ name: 'myView' }"
                    >
                    个人中心
                    </RouterLink>
                </div>
            </div>
            </div>
        </div>

        <div class="head">
            <div class="content">
            <a href="/" class="logo"> <img class="logo-img" src="@/assets/hxplogo.png" alt=""/> </a>
            <div class="search-msg">
                <input type="text" placeholder="请输入关键字" class="search-input">
                <div class="search-type-box"></div>
                <input type="submit" value="搜索" class="search-btn">
            </div>
            <div class="cart-btn">购物车(0)</div>
            </div>
        </div>

        <RouterView />

        <div class="foot">
            <div class="foot-box">
            <div class="company-msg">
                <img class="img" src="@/assets/qrcode.png"/>
                <div class="name">河源职业技术学院</div>
                <div class="web">www.hypt.edu.cn</div>
            </div>
            <div class="right">
                <div class="item service">
                <div class="tit">服务保障</div>
                <div class="con">
                    <div class="text">正品保证</div>
                    <div class="text">7天无理由退换</div>
                    <div class="text">7*8小时客户服务</div>
                </div>
                </div>
                <div class="item service">
                <div class="tit">支付方式</div>
                <div class="con">
                    <div class="text">线上支付</div>
                    <div class="text">货到付款</div>
                    <div class="text">线下付款</div>
                </div>
                </div>
                <div class="item service">
                <div class="tit">会员服务</div>
                <div class="con">
                    <div class="text">免费注册</div>
                    <div class="text">找回密码</div>
                    <div class="text">个人中心</div>
                </div>
                </div>
                <div class="item service">
                <div class="tit">物流服务</div>
                <div class="con">
                    <div class="text">商品免邮</div>
                    <div class="text">快递配送</div>
                    <div class="text">EMS</div>
                </div>
                </div>
            </div>
            </div>
            <div class="copyright">Copyright © 2005-2023 河职院软件技术专业 版权所有 | 粤ICP备05048027号</div>
        </div>
    </div>
</template>
<script setup>
import { RouterView } from 'vue-router';
</script>
<style scoped>
.top {
  width: 100%;
  height: 36px;
  line-height: 36px;
  color: #999;
  background-color: #f6f6f6
}

.top .con {
  width: 1200px;
  height: 36px;
  display: flex;
  margin: auto
}

.top .left {
  position: relative;
  padding-left: 21px;
  flex: 1
}


.top .right {
  display: flex
}

.top .right .item {
  position: relative;
  z-index: 1
}

.top .con .right .item .text {
  color: #999;
  margin-right: 10px;
}

.top .con .right .item .link {
  margin-right: 10px;
  position: relative;
  display: inline-block
}

.top .con .right .item .link,
.top .con .right .item .link .link-a {
  color: #e1251b;
  display: inline-block;
  vertical-align: top
}

.top .con .right .item .link .link-a:hover {
  font-weight: 600
}


.top .con .right .item .item-a {
  padding: 0 10px 0 11px;
  position: relative;
  z-index: 90;
  display: block
}

.top .con .right .item .item-a:after {
  position: absolute;
  top: 10px;
  left: 0;
  display: block;
  content: " ";
  width: 1px;
  height: 16px;
  background: #ccc;
}

.top .con .right .item:hover .item-a {
  color: #e1251b
}


.head {
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .09)
}


.head .content {
  width: 1200px;
  max-width: 1200px;
  margin: auto;

  display: flex;
  align-items: center;
  height: 130px;
  padding-bottom: 26px;
  box-sizing: border-box
}

.head .logo {
  height: 80px;
  display: flex;
  cursor: pointer
}

.head .logo .logo-img {
  display: block;
  width: 212px;
  height: 80px;
  background-size: 100%
}


.head .search-msg {
  position: relative;
  height: 40px;
  margin-left: auto
}

.head .search-msg .search-input {
  width: 600px;
  height: 40px;
  padding: 0 180px 0 10px;
  border: 2px solid #e1251b;
  box-sizing: border-box
}

.head .search-msg .search-type-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 124px;
  transform: translateY(-50%);
  cursor: pointer
}


.head .search-msg .search-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 109px;
  background: #e1251b;
  letter-spacing: 2px;
  border: 0
}

.head .cart-btn,
.head .search-msg .search-btn {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: all .2s;
  -webkit-transition: all .2s
}

.head .cart-btn {
  position: relative;
  width: 160px;
  padding: 0 20px 0 52px;
  background-color: #e1251b;
  margin-left: 50px;
  box-sizing: border-box
}

.head .cart-btn:before {
  position: absolute;
  left: 25px;
  top: 11px;
  display: block;
  width: 19px;
  height: 18px;
  content: " ";
}

.head .cart-btn:hover,
.head .search-msg .search-btn:hover {
  opacity: .9
}

.foot {
  width: 100%;
  min-height: 230px;
  color: #666;
  background: #222
}

.payment + .foot {
  border-top: 90px solid #f9f9f9
}

.foot .foot-box {
  width: 1200px;
  margin: auto;
  display: flex;
  padding: 40px 0 30px;
  background: #222
}

.foot .foot-box .company-msg {
  padding: 0 60px;
  border-right: 1px solid #333
}

.foot .foot-box .company-msg .img {
  display: block;
  margin: auto;
  width: 100px;
  height: 100px
}

.foot .foot-box .company-msg .name {
  color: #00a0e9;
  font-size: 14px;
  margin: 5px 0 10px;
  text-align: center
}

.foot .foot-box .company-msg .web {
  line-height: 20px
}

.foot .foot-box .right {
  display: flex;
  margin-left: 60px;
  padding-top: 5px
}

.foot .foot-box .right .item {
  width: 100px;
  margin-right: 80px
}

.foot .foot-box .right .item:last-child {
  margin-right: 0
}


.foot .foot-box .right .item.service .tit {
  font-size: 14px;
  margin-top: 3px
}

.foot .foot-box .right .item.service .con {
  margin-top: 10px;
  line-height: 30px
}

.foot .copyright {
  width: 100%;
  background: #1b1b1b;
  padding: 10px 0;
  text-align: center
}
</style>